<template>
  <div class="pos-rlt pt20">
    <BindAccount ref="bindAccountModal"></BindAccount>
    <div class="pos-abs r0" style="top:-40px">
      <a-button type="primary" @click="toBindAccount">
        <i class="fa fa-plus-circle mr10"/>绑定新账号
      </a-button>
    </div>
    <a-empty v-if="accounts.length===0"></a-empty>
    <div v-else>
      <div class="flx-b pt10 mb10" style="border-top:solid 1px #e2e2e2;" v-for="(a,i) in accounts" :key="`account${i}`">
        <div>已绑定用户：{{ a.username }}</div>
        <div>
          <ZgButton @click="toRemoveAccount(a)" type="link" icon="minus-circle" class="mr10">取消绑定</ZgButton>
          <ZgButton @click="toSwitchAccount(a)" type="link" icon="sign-in">切换账号</ZgButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import BindAccount from '@/views/account/personal/BindAccount.vue'
export default {
  components: {
    BindAccount
  },
  data () {
    return {
      accounts: this.$store.state.app.accounts
    }
  },
  methods: {
    toBindAccount () {
      this.$refs.bindAccountModal.open()
    },
    toRemoveAccount (a) {
      this.confirm(() => {
        this.accounts = this.accounts.filter(t => {
          return t.username !== a.username
        })
        store.commit('TOGGLE_ACCOUNTS', this.accounts)
        this.$success({ title: '操作成功！' })
      })
    },
    toSwitchAccount (a) {
      this.confirm(() => {
        this.$http.post('/zg-system/un/token/create', a, data => {
          storage.set(ACCESS_TOKEN, data, 7 * 24 * 60 * 60 * 1000)
          store.commit('SET_TOKEN', data)
          window.location.reload()
        })
      }, '确定切换当前会话到该账号么？')
    }
  }
}
</script>

<style scoped>

</style>
